﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - bootstrap中文后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">


<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link href="css/materialdesignicons.min.css" rel="stylesheet" th:href="@{/css/materialdesignicons.min.css}">
<link href="css/style.css" rel="stylesheet" th:href="@{/css/style.css}">
</head>
  
<body data-logobg="color_8" data-sidebarbg="color_8">
<div class="layout-web">
  <div class="layout-container">
    <!--左侧导航-->
    <div th:replace="common/commn :: aside"></div>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <div th:replace="common/commn :: #header"></div>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="layout-content">
      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">

                <div class="masonry-grid gap-2" data-provide="photoswipe">

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/1.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/5.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/2.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/3.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/4.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/9.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/6.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/7.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/8.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/10.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/11.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/13.jpg" alt="The selected child description">
                  </a>

                  <a class="masonry-item" href="#">
                    <img src="images/gallery/14.jpg" alt="The selected child description">
                  </a>

                </div>

              </div>
            </div>
          </div>

        </div>

      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js" th:src="@{/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" src="js/main.js" th:src="@{/js/main.js}"></script>

<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    var $dashChartBarsCnt  = jQuery( '.js-chartjs-bars' )[0].getContext( '2d' ),
        $dashChartLinesCnt = jQuery( '.js-chartjs-lines' )[0].getContext( '2d' );
    
    var $dashChartBarsData = {
		labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
		datasets: [
			{
				label: '注册用户',
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0)',
				backgroundColor: 'rgba(51,202,185,0.5)',
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
				data: [2500, 1500, 1200, 3200, 4800, 3500, 1500]
			}
		]
	};
    var $dashChartLinesData = {
		labels: ['2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
		datasets: [
			{
				label: '交易资金',
				data: [20, 25, 40, 30, 45, 40, 55, 40, 48, 40, 42, 50],
				borderColor: '#358ed7',
				backgroundColor: 'rgba(53, 142, 215, 0.175)',
                borderWidth: 1,
                fill: false,
                lineTension: 0.5
			}
		]
	};
    
    new Chart($dashChartBarsCnt, {
        type: 'bar',
        data: $dashChartBarsData
    });
    
    var myLineChart = new Chart($dashChartLinesCnt, {
        type: 'line',
        data: $dashChartLinesData,
    });
});
</script>
</body>
</html>